<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <style>
        .ratings-table {
            width: 100%;
            border-collapse: collapse;
        }
        .ratings-table th, .ratings-table td {
            text-align: center;
            padding: 8px;
        }
        .ratings-table th {
            background-color: #f2f2f2;
        }
        .ratings-table tr:nth-child(odd) {
            background-color: #f9f9f9;
        }
        .ratings-table tr:nth-child(even) {
            background-color: #e9e9e9;
        }
        .question-text {
            text-align: left;
        }
        .submit-container {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>{{ title }}</h1>
        <div class="instructions"><p>{{ instructions|safe }}</p></div>
        <form action="" method="post">
            <table class="ratings-table">
                <tr>
                    <th></th>
                    {% for option in options %}
                    <th>{{ option.text }}</th>
                    {% endfor %}
                </tr>
                {% for question in questions %}
                <tr class="{{ loop.cycle('odd-row', 'even-row') }}">
                    <td class="question-text">{{ question.text }}</td>
                    {% for option in options %}
                    <td>
                        <input type="radio" id="q{{ question.id }}_option{{ option.score }}" name="q{{ question.id }}" value="{{ option.score }}" required>
                        <label for="q{{ question.id }}_option{{ option.score }}"></label>
                    </td>
                    {% endfor %}
                </tr>
                {% endfor %}
                <tr>
                    <th></th>
                    {% for option in options %}
                    <th>{{ option.text }}</th>
                    {% endfor %}
                </tr>
            </table>
            <div class="submit-container">
                <button type="submit">Abschicken</button>
            </div>
        </form>
    </div>
</body>
</html>
